div {
  height: 300px;
  width: 180px;
  background-image: url(../img/charector.png);
  animation: run 1s step-end infinite;
}

@keyframes run {
  0% {
    background-position: 0px 0;
    /*background-position:水平位置 垂直位置 */
  }

  14.3% {
    background-position: -180px 0;
  }

  23.6% {
    background-position: -360px 0;
  }

  42.9% {
    background-position: -540px 0;
  }

  57.2% {
    background-position: -720px 0;
  }

  71.5% {
    background-position: -900px 0;
  }

  85.8% {
    background-position: -1080px 0;
  }

  100% {
    background-position: -1260px 0;
  }
}

/* 为了能看见最后一帧，设为倒数第二帧 */